<template>
  <el-select v-model="value" placeholder="2123" @change="changeData">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
  <div class="lined-chart"></div>
</template>

<script setup>
import * as echarts from 'echarts/core';
import { handleTrainLog } from '@/api.js'
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';

import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { ref, onMounted,getCurrentInstance } from 'vue'
const instance = getCurrentInstance();
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

const props = defineProps({
  data: Object
})
const keys = Object.keys(props.data)
let test = [];
let train = []
console.log(props.data);
for (let [key, value] of Object.entries(props.data.test)) {
  test.push({
    name: key,
    type: 'line',
    stack: 'Total',
    data: value
  })
}
for (let [key, value] of Object.entries(props.data.train)) {
  train.push({
    name: key,
    type: 'line',
    stack: 'Total',
    data: value
  })
}
console.log(test);
const option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: keys
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [0,1,2,3,4,5,6,7,8,9]
  },
  yAxis: {
    type: 'value'
  },
  series: test
};
const options = [
  {
    value: 0,
    label: 'test',
  },
  {
    value: 1,
    label: 'train',
  }
]
const value = ref(0);
let LineChartDom;
let Linechart;
onMounted(() => {
LineChartDom = document.querySelector('.lined-chart');
 Linechart = echarts.init(LineChartDom);
 option && Linechart.setOption(option);
})
const changeData = () => {
  console.log(value.value);
  if (value.value == 0) {
    option.series = test;
  }
  if (value.value == 1) {
    option.series = train;
  }
  console.log(option.series);
  option && Linechart.setOption(option);
  instance.proxy.$forceUpdate();
}
</script>

<style scoped>
.lined-chart {
  width: 100%;
  height: 90%;
}
</style>